<template>
    <el-checkbox-group v-model="checkboxGroup" size="mini" @change="handleChange"
                       style="display: inline-block" :disabled="compDisabled">
      <el-checkbox-button :label="''">不限</el-checkbox-button>
      <el-checkbox-button v-for="item in props" :label="item.value" :key="item.value">{{ item.label }}
      </el-checkbox-button>
    </el-checkbox-group>
</template>

<script>

export default {
  name: "CsRadioCheckbox",
  props: {
    props: {
      type: Array
    },
    value: {
      type: Array
    },
    disabled: {
      type: Boolean
    }
  },
  data() {
    return {}
  },
  computed: {
    'checkboxGroup': {
      get: function () {
        if (this.value.length === 0) {
          return ['']
        } else {
          return this.value
        }
      },
      set: function (v) {
          this.$emit('input', v)
          this.$emit('change', v)
      }
    },
    compDisabled: {
      get() {
        return this.disabled
      },
      set(val) {
        this.$emit('update:disabled', val || false)
      }
    }
  },
  methods: {
    handleChange(val) {
      if (val.indexOf('') > 0 || val.length === 0) {
        this.checkboxGroup = []
      } else if (val.indexOf('') === 0 && val.length > 1) {
        this.checkboxGroup.shift()
      }
    }
  }
}
</script>

<style scoped>

</style>
